<template>
    <div>
        <div>
            <div style="display: flex;justify-content: space-between;">
                <div>
                    <el-input
                            :disabled="showSearch"
                            placeholder="请输入员工姓名..."
                            prefix-icon="el-icon-search"
                            clearable
                            @clear="getEmployees"
                            size="small"
                            style="width: 300px;margin-right: 8px;"
                            @keydown.enter.native="getEmployees"
                            v-model="name"></el-input>
                    <el-button icon="el-icon-search" type="primary" size="small" @click="getEmployees" :disabled="showSearch">查询</el-button>
                    <el-button type="primary" size="small" @click="showSearch=!showSearch">
                        <i :class="showSearch?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
                        条件查询
                    </el-button>
                </div>
                <div>
                    <el-upload
                            :disabled="importIsDisabled"
                            :on-success="onSuccess"
                            :on-error="onError"
                            :before-upload="beforeUpload"
                            style="display: inline-flex;margin-right: 8px"
                            class="upload-demo"
                            action="/employee/basic/import"
                            :show-file-list="false">
                        <el-button :disabled="importIsDisabled" :icon="importDataBtnIcon" type="success" size="small">{{importDataBtnText}}</el-button>
                    </el-upload>
                    <el-button icon="el-icon-download" type="success" size="small" @click="exportEmployee">导出文件</el-button>
                    <el-button icon="el-icon-circle-plus-outline" type="primary" size="small" @click="showAddEmployee">新增员工</el-button>
                </div>
            </div>
            <el-collapse-transition>
            <div v-show="showSearch" style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px">
                <el-row>
                    <el-col :span="5">
                        <el-tag size="small"  type="warning">政治面貌:</el-tag>
                        <el-select v-model="searchParams.politicId" size="mini" style="margin-left: 5px;width: 150px" placeholder="请选择政治面貌">
                        <el-option
                                v-for="item in politicsstatus"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    </el-col>
                    <el-col :span="5">
                        <el-tag size="small"  type="warning">职位:</el-tag>
                        <el-select v-model="searchParams.positionId" size="mini"  style="margin-left: 5px;width: 150px" placeholder="请选择职位">
                            <el-option
                                    v-for="item in positions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="5">
                        <el-tag size="small"  type="warning">电话号码:</el-tag>
                        <el-input size="mini" style="margin-left: 5px;width: 150px" prefix-icon="el-icon-phone" v-model="searchParams.phone" placeholder="请输入电话号码..."></el-input>
                    </el-col>
                    <el-col :span="5">
                        <el-tag size="small"  type="warning">员工工号:</el-tag>
                        <el-input size="mini" style="margin-left: 5px;width: 150px" prefix-icon="el-icon-user-solid" v-model="searchParams.jobNo"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-tag size="small"  type="warning">职称:</el-tag>
                        <el-select v-model="searchParams.jobLevelId" size="mini"  style="margin-left: 5px;width: 150px" placeholder="请选择职称">
                            <el-option
                                    v-for="item in jobLevels"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <div style="display: inline-flex">
                            <el-tag size="small" type="warning" style="margin-top: 8px;margin-right: 5px">所属部门:</el-tag>
                            <dep-choose @isClose="searchHandleNodeClick" :departmentId="searchParams.departmentId" :departmentName="searchParams.department.name"></dep-choose>
                        </div>
                    </el-col>
                    <el-col :span="5" :offset="9" style="margin-top: 8px;display: flex;justify-content:center">
                        <el-button size="mini" @click="emptySearchParams">清空</el-button>
                        <el-button size="mini" icon="el-icon-search" type="primary" @click="getEmployees('advanced')">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
            </el-collapse-transition>
        </div>
        <div style="margin-top: 8px">
            <el-table
                    :data="employees"
                    stripe
                    border
                    @selection-change="handleSelectionChange"
                    v-loading="loading"
                    element-loading-text="数据加载中..."
                    size="mini"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        fixed>
                </el-table-column>
                <el-table-column
                        prop="jobNo"
                        width="100"
                        label="工号">
                </el-table-column>
                <el-table-column
                        prop="birthday"
                        width="90"
                        label="出生日期">
                </el-table-column>
                <el-table-column
                        prop="idCard"
                        width="210"
                        label="身份证号码">
                </el-table-column>
                <el-table-column
                        prop="maritalStatus"
                        label="婚姻状况">
                </el-table-column>
                <el-table-column
                        prop="nation.name"
                        label="民族">
                </el-table-column>
                <el-table-column
                        prop="birthPlace"
                        label="籍贯">
                </el-table-column>
                <el-table-column
                        prop="politicsstatus.name"
                        label="政治面貌">
                </el-table-column>
                <el-table-column
                        prop="email"
                        width="150"
                        label="电子邮箱">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        width="100"
                        label="电话号码">
                </el-table-column>
                <el-table-column
                        prop="address"
                        width="200"
                        label="地址">
                </el-table-column>
                <el-table-column
                        prop="department.name"
                        label="部门">
                </el-table-column>
                <el-table-column
                        prop="jobLevel.name"
                        width="90"
                        label="职称">
                </el-table-column>
                <el-table-column
                        prop="position.name"
                        width="90"
                        label="职位">
                </el-table-column>
                <el-table-column
                        prop="education"
                        label="最高学历">
                </el-table-column>
                <el-table-column
                        prop="specialty"
                        width="130"
                        label="专业">
                </el-table-column>
                <el-table-column
                        prop="school"
                        width="150"
                        label="毕业院校">
                </el-table-column>
                <el-table-column
                        prop="onboardingDate"
                        width="100"
                        label="入职日期">
                </el-table-column>
                <el-table-column
                        width="90"
                        label="合同期限">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.contractTerm}}</el-tag>
                        年
                    </template>
                </el-table-column>
                <el-table-column
                        prop="conversionTime"
                        width="100"
                        label="转正日期">
                </el-table-column>
                <el-table-column
                        prop="beginContract"
                        width="100"
                        label="合同起始日期">
                </el-table-column>
                <el-table-column
                        prop="endContract"
                        width="100"
                        label="合同终止日期">
                </el-table-column>
                <el-table-column
                        prop="workState"
                        label="任职状态">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        width="145"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button  size="mini" @click="showEidtEmployee(scope.row)" type="success" >编辑</el-button>
                        <el-button  size="mini" type="danger" @click="deleteEmployee(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-start;">
                <el-button type="danger" @click="batchDelete" size="small" style="margin-top: 10px;margin-right: 100px"
                           :disabled="multipleSelection.length==0">批量删除
                </el-button>
                <div style="display: flex;justify-content: center;margin-top: 10px">
                    <el-pagination
                            background
                            @size-change="sizeChange"
                            @current-change="currentChange"
                            layout="sizes, prev, pager, next, jumper, ->, total, slot"
                            :total="total">
                    </el-pagination>
                </div>
            </div>

        </div>
        <el-dialog
                @close="closeDilog"
                :title="title"
                :visible.sync="dialogVisible"
                width="90%">
            <div>
                <el-form :model="employee" :rules="emprules" ref="empForm">
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="员工姓名:" prop="name">
                                <el-input size="mini" style="width: 180px" prefix-icon="el-icon-edit" v-model="employee.name" placeholder="请输入员工姓名..."></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="性别:" prop="gender">
                                <el-radio-group v-model="employee.gender">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="出生日期:" prop="birthday">
                                <el-date-picker
                                        v-model="employee.birthday"
                                        type="date"
                                        size="mini"
                                        align="center"
                                        style="width: 180px"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择出生日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="政治面貌:" prop="politicId">
                                <el-select v-model="employee.politicId" size="mini"  style="width: 180px" placeholder="请选择政治面貌">
                                    <el-option
                                            v-for="item in politicsstatus"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="民族:" prop="nationId">
                                <el-select v-model="employee.nationId" size="mini"  style="width: 180px" placeholder="请选择民族">
                                    <el-option
                                            v-for="item in nations"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="电子邮箱:" prop="email">
                                <el-input size="mini" style="width: 180px" prefix-icon="el-icon-message" v-model="employee.email" placeholder="请输入电子邮箱..."></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="籍贯:" prop="birthPlace">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit" v-model="employee.birthPlace" placeholder="请输入籍贯..."></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="联系地址:" prop="address">
                                <el-input size="mini" style="width: 180px" prefix-icon="el-icon-house" v-model="employee.address" placeholder="请输入联系地址..."></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="任职职位:" prop="positionId">
                                <el-select v-model="employee.positionId" size="mini"  style="width: 180px" placeholder="请选择职位">
                                    <el-option
                                            v-for="item in positions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="职称:" prop="jobLevelId">
                                <el-select v-model="employee.jobLevelId" size="mini"  style="width: 180px" placeholder="请选择职称">
                                    <el-option
                                            v-for="item in jobLevels"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="电话号码:" prop="phone">
                                <el-input size="mini" style="width: 180px" prefix-icon="el-icon-phone" v-model="employee.phone" placeholder="请输入电话号码..."></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="部门:" prop="departmentId">
                                <dep-choose @isClose="initDep" :departmentId="employee.departmentId" :departmentName="selectdDepName"></dep-choose>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="员工工号:" prop="jobNo">
                                <el-input size="mini" style="width: 180px" prefix-icon="el-icon-user-solid" v-model="employee.jobNo" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="毕业院校:" prop="school">
                                <el-input size="mini" style="width: 180px" prefix-icon="el-icon-school" placeholder="请输入毕业院校名称..." v-model="employee.school"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="学历:" prop="education">
                                <el-select v-model="employee.education" size="mini"  style="width: 180px" placeholder="请选择学历">
                                    <el-option
                                            v-for="item in educations"
                                            :key="item"
                                            :label="item"
                                            :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="入职日期:" prop="onboardingDate">
                                <el-date-picker
                                        v-model="employee.onboardingDate"
                                        type="date"
                                        size="mini"
                                        align="center"
                                        style="width: 130px"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择入职日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="转正日期:" prop="conversionTime">
                                <el-date-picker
                                        v-model="employee.conversionTime"
                                        type="date"
                                        size="mini"
                                        align="center"
                                        style="width: 130px"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择转正日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="合同起始日期:" prop="beginContract">
                                <el-date-picker
                                        v-model="employee.beginContract"
                                        type="date"
                                        size="mini"
                                        align="center"
                                        style="width: 130px"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择合同起始日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="合同终止日期:" prop="endContract">
                                <el-date-picker
                                        v-model="employee.endContract"
                                        type="date"
                                        size="mini"
                                        align="center"
                                        style="width: 130px"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择合同终止日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="专业:" prop="specialty">
                                <el-input size="mini" style="width: 180px" prefix-icon="el-icon-edit" v-model="employee.specialty" placeholder="请输入专业名称..."></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="身份证号码:" prop="idCard">
                                <el-input size="mini" style="width: 220px" prefix-icon="el-icon-postcard" v-model="employee.idCard" placeholder="请输入身份证号码..."></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="婚姻状况:" prop="maritalStatus">
                                <el-radio-group v-model="employee.maritalStatus">
                                    <el-radio label="已婚">已婚</el-radio>
                                    <el-radio label="未婚">未婚</el-radio>
                                    <el-radio label="离异">离异</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="addemployee">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    import {Message} from "element-ui";
    import {checkphone} from "../../utils/myvalid";
    import {checkIdNum} from "../../utils/myvalid";
    import depChoose from  '@/components/emp/depChoose';
    export default {
        name: "EmpBasic",
        data() {
            return {
                searchParams:{
                    politicId:null,
                    positionId:null,
                    phone:null,
                    jobLevelId: null,
                    departmentId: null,
                    jobNo:null,
                    department:{
                        name:null
                    }
                },
                showSearch:false,
                importIsDisabled:false,
                importDataBtnText:'导入文件',
                importDataBtnIcon:'el-icon-upload2',
                title:'添加员工信息',
                popVisible:false,
                popVisible2:false,
                dialogVisible:false,
                loading: false,
                employees: [],
                total: 0,
                pageNo: 1,
                pageSize: 10,
                name: "",
                employee: {
                    name: "",
                    gender: "",
                    birthday: "",
                    idCard: "",
                    maritalStatus: "",
                    nationId: 1,
                    birthPlace: "",
                    politicId: null,
                    email: "",
                    phone: "",
                    address: "",
                    departmentId: null,
                    jobLevelId: null,
                    positionId: null,
                    education: "",
                    specialty: "",
                    school: "",
                    onboardingDate: "",
                    jobNo: "",
                    contractTerm: 0,
                    conversionTime: "",
                    leaveWorkDate: null,
                    beginContract: "",
                    endContract: "",
                    workAge: null
                },
                nations:[],
                jobLevels:[],
                politicsstatus:[],
                positions:[],
                educations: ['博士','硕士','本科','大专','中专','高中','初中','小学','其他'],
                allDepartments:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                selectdDepName:'',
                emprules:{
                    name: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
                    gender: [{required: true, message: '请选择性别', trigger: 'blur'}],
                    birthday: [{required: true, message: '请选择出生日期', trigger: 'blur'}],
                    idCard: [{required: true,validator:checkIdNum, trigger: 'blur'},],
                    maritalStatus: [{required: true, message: '请选择婚姻状况', trigger: 'blur'}],
                    nationId: [{required: true, message: '请选择民族', trigger: 'blur'}],
                    birthPlace: [{required: true, message: '请输入籍贯', trigger: 'blur'}],
                    politicId: [{required: true, message: '请选择政治面貌', trigger: 'blur'}],
                    email: [
                        {required: true, message: '请输入电子邮箱地址', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true,validator:checkphone ,trigger: 'blur'}],
                    address: [{required: true, message: '请输入联系地址', trigger: 'blur'}],
                    departmentId: [{required: true, message: '请选择部门', trigger: 'blur'}],
                    jobLevelId: [{required: true, message: '请选择职称', trigger: 'blur'}],
                    positionId: [{required: true, message: '请选择职位', trigger: 'blur'}],
                    education: [{required: true, message: '请选择学历', trigger: 'blur'}],
                    specialty: [{required: true, message: '请输入专业', trigger: 'blur'}],
                    school: [{required: true, message: '请输入毕业院校', trigger: 'blur'}],
                    onboardingDate: [{required: true, message: '请选择入职日期', trigger: 'blur'}],
                    workState: [{required: true, message: '请选择工作状态', trigger: 'blur'}],
                    jobNo: [{required: true, message: '请输入工号', trigger: 'blur'}],
                    contractTerm: [{required: true, message: '请输入合共期限', trigger: 'blur'}],
                    conversionTime: [{required: true, message: '请选择转正日期', trigger: 'blur'}],
                    beginContract: [{required: true, message: '请选择合同开始日期', trigger: 'blur'}],
                    endContract: [{required: true, message: '请选择合同终止日期', trigger: 'blur'}],
                    workingAge: [{required: true, message: '请输入工龄', trigger: 'blur'}],

                },
                multipleSelection:[]
            }
        },
        components:{
          depChoose
        },
        mounted() {
            this.getEmployees();
            this. getSelectData();
        },
        methods: {
            initDep(data){
              this.employee.departmentId = data.id;
              this.selectdDepName = data.name;
            },
            // 当选择多选框时，把多选框行内的值赋值给multipleSelection对象
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            batchDelete(){
                this.$confirm('此操作将永久删除【'+this.multipleSelection.length+'】条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids= '?';
                    //拼接id数组
                    this.multipleSelection.forEach(item=>{
                        ids += 'ids=' + item.id + '&';
                    })
                    this.deleteRequest("/employee/basic/batchDeleteEmployeeByIds"+ids).then(resp => {
                        if (resp) {
                            this.getEmployees();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            emptySearchParams() {
                this.searchParams = {
                    politicId: null,
                    positionId: null,
                    phone: null,
                    jobLevelId: null,
                    departmentId: null,
                    jobNo: null,
                    department:{
                        name:null
                    }
                };
                this.getEmployees();
            },
            searchHandleNodeClick(data){
                this.searchParams.departmentId = data.id;
                this.searchParams.department.name = data.name;
            },
            onError(err, file, fileList){
                this.importDataBtnText = '导入文件';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importIsDisabled = false;
            },
            onSuccess(response, file, fileList){
                this.importDataBtnText = '导入文件';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importIsDisabled = false;
                Message.success({message: response.msg});
                this.getEmployees();
            },
            beforeUpload(){
                this.importDataBtnText = '正在导入...';
                this.importDataBtnIcon = 'el-icon-loading';
            },
            exportEmployee(){
                 window.open("/employee/basic/export?pageNo=" + this.pageNo + "&pageSize=" + this.pageSize,'_parent');
            },
            closeDilog() {
                this.dialogVisible = false;
                this.$refs['empForm'].resetFields();//将form表单重置
            },
            deleteEmployee(data){
                this.$confirm('此操作将永久删除【' + data.name + '】员工, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/employee/basic/" + data.id).then(resp => {
                        if (resp) {
                           this.getEmployees();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            emptyemployee() {
                this.employee = {
                    name: "",
                    gender: "",
                    birthday: "",
                    idCard: "",
                    maritalStatus: "",
                    nationId: null,
                    birthPlace: "",
                    politicId: null,
                    email: "",
                    phone: "",
                    address: "",
                    departmentId: null,
                    jobLevelId: null,
                    positionId: null,
                    education: "",
                    specialty: "",
                    school: "",
                    onboardingDate: "",
                    jobNo: "",
                    contractTerm: 0,
                    conversionTime: "",
                    leaveWorkDate: null,
                    beginContract: "",
                    endContract: "",
                    workingAge: null
                }
                this.selectdDepName = "";
            },
            addemployee() {
                //如果id存在则视为更新操作，如果不存在则为新增员工信息操作
                if (this.employee.id) {
                    this.$refs.empForm.validate(valid => {
                        if (valid) {
                            this.putRequest("/employee/basic/", this.employee).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.getEmployees();
                                    this.emptyemployee();
                                }
                            })
                        }
                    })
                } else {
                    this.$refs.empForm.validate(valid => {
                        if (valid) {
                            this.postRequest("/employee/basic/", this.employee).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.getEmployees();
                                    this.emptyemployee();
                                }
                            })
                        }
                    })
                }
            },
            getMaxjobNo(){
                this.getRequest("/employee/basic/getjobno").then(resp=>{
                    if(resp){
                        this.employee.jobNo = resp.obj;
                    }
                })
            },
            getSelectData() {
                if (!window.sessionStorage.getItem("nations")) {
                    this.getRequest("/employee/basic/getallnations").then(resp => {
                        if (resp) {
                            this.nations = resp;
                            window.sessionStorage.setItem("nations", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.nations = JSON.parse(window.sessionStorage.getItem("nations"));
                }
                if (!window.sessionStorage.getItem("jobLevels")) {
                    this.getRequest("/employee/basic/getalljoblevels").then(resp => {
                        if (resp) {
                            this.jobLevels = resp;
                            window.sessionStorage.setItem("jobLevels", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.jobLevels = JSON.parse(window.sessionStorage.getItem("jobLevels"));
                }
                if (!window.sessionStorage.getItem("positions")) {
                    this.getRequest("/employee/basic/getallpositions").then(resp => {
                        if (resp) {
                            this.positions = resp;
                            window.sessionStorage.setItem("positions", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.positions = JSON.parse(window.sessionStorage.getItem("positions"));
                }
                if (!window.sessionStorage.getItem("politicsstatus")) {
                    this.getRequest("/employee/basic/getallpolstatus").then(resp => {
                        if (resp) {
                            this.politicsstatus = resp;
                            window.sessionStorage.setItem("politicsstatus", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.politicsstatus = JSON.parse(window.sessionStorage.getItem("politicsstatus"));
                }
                if (!window.sessionStorage.getItem("allDepartments")) {
                    this.getRequest("/employee/basic/getalldepartments").then(resp => {
                        if (resp) {
                            this.allDepartments = resp;
                            window.sessionStorage.setItem("allDepartments", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.allDepartments = JSON.parse(window.sessionStorage.getItem("allDepartments"));
                }
            },
            showAddEmployee() {
                this.emptyemployee();
                this.title = '添加员工信息';
                this.getMaxjobNo();
                this.dialogVisible = true;
            },
            showEidtEmployee(data){
                this.title = '修改员工信息';
                this.employee = JSON.parse(JSON.stringify(data));
                this.selectdDepName = data.department.name;
                this.dialogVisible = true;
            },
            //点击页码的时候触发的函数，将页码改变，然后传参去后端获取数据
            currentChange(currentPage) {
                this.pageNo = currentPage;
                this.getEmployees();
            },
            //点击页数的时候触发的函数，将页数改变，然后传参去后端获取数据
            sizeChange(pageSize) {
                this.pageSize = pageSize;
                this.getEmployees();
            },
            getEmployees(type) {
                this.loading = true;
                let url ="/employee/basic/?pageNo="+ this.pageNo + "&pageSize=" + this.pageSize ;
                //区分是条件查询还是普通查询
                if (type && type == 'advanced') {
                    if(this.searchParams.politicId){
                        url += '&politicId='+this.searchParams.politicId;
                    }
                    if (this.searchParams.jobLevelId) {
                        url += '&jobLevelId=' + this.searchParams.jobLevelId;
                    }
                    if (this.searchParams.positionId) {
                        url += '&positionId=' + this.searchParams.positionId;
                    }
                    if (this.searchParams.departmentId) {
                        url += '&departmentId=' + this.searchParams.departmentId;
                    }
                    if (this.searchParams.phone) {
                        url += '&phone=' + this.searchParams.phone;
                    }
                    if (this.searchParams.jobNo) {
                        url += '&jobNo=' + this.searchParams.jobNo;
                    }
                } else {
                    url += "&name=" + this.name;
                }
                this.getRequest(url).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.employees = resp.data;
                        this.total = resp.total;
                    }
                })
            }
        }
    }
</script>

<style>
    body .el-table th.gutter {
        display: table-cell !important
    }
    .depdiv {
        width: 150px;
        display: inline-flex;
        margin-top: 7px;
        font-size: inherit;
        border: 1px solid #dedede;
        height: 26px;
        border-radius: 5px;
        cursor: pointer;
        align-items: center;
        padding-left: 8px;
        box-sizing: border-box;
    }
    .transition-box {
        margin-bottom: 10px;
        width: 200px;
        height: 100px;
        border-radius: 4px;
        background-color: #409EFF;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-right: 20px;
    }
</style>
